<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>过渡动画</title>
		<style>
			
			* {
				margin: 0;
				padding: 0;
			}

			div {
				/* 过渡动画属性 */
				/*transition-property: width, height;*/

				/* 过渡动画持续时间 */
				/*transition-duration: 2s, 2s;*/

				/* 
					动画时间函数 
					linear: 匀速的;
					ease: 逐渐慢下来;(默认效果)
					ease-in: 淡入效果(加速);
					ease-out: 淡出效果(减速);
					ease-in-out: 淡入淡出效果(先加速再减速);

				*/
				/*transition-timing-function: ease-in-out;*/

				/* 
					cubic-bezier 
					贝塞尔曲线
				*/
				/*transition-timing-function: cubic-bezier(0.2, -0.8, 0.75, 1.5);*/

				/* 动画延迟时间 */
				/*transition-delay: 0s, 2s;*/

				/* 简写 */
				/* 至少要写一个时间才有过渡效果 */
				/*transition: 2s;*/
				
				/* 
					transition-property transition-duration transition-timing-function transition-delay
				*/
				/*transition: width 2s ease 2s;*/

				transition: width 2s linear,
							height 2s linear 2s,
							border-radius 2s linear 4s;

				width: 200px;
				height: 200px;
				background-color: red;


			}

			div:hover {
				width: 600px;
				height: 600px;
				border-radius: 50%;
			}


		</style>
	</head>
	<body>

		<div></div>
		
	</body>
</html>